<template>
  <div id="vote-list">
    <!-- <van-nav-bar title="我的会议" left-arrow fixed :border="false" @click-left="$common.backButtonClicked(false)"></van-nav-bar> -->
    <div class="nav-container">
      <van-tabs sticky animated swipeable color="#2E79FF" @click="setSrollTop" v-model="activeTab">
        <van-tab v-for="(item, index) in tabs" :key="`${index}tab页`" :title="item.name">
          <div class="tab-panel" :ref="item.data">
            <van-pull-refresh v-model="refreshLoading" @refresh="getDataList(item.data, item.page, item.type, item.finished, true, false)">
              <img
                slot="loading"
                class="loading-gif-refresh"
                src="../../assets/loading.gif"
              >
              <template v-if="getDataFiled(item.data).length == 0 && getDataFiled(item.finished)">
                <div class="no-data-img">
                  <img src="../../assets/meeting/no_meeting.png">
                  <p>暂无投票</p>
                </div>
              </template>
              <van-list
                v-show="getDataFiled(item.data).length > 0"
                v-model="isLoading"
                :finished="getDataFiled(item.finished)"
                finished-text="没有更多数据了"
                @load="getDataList(item.data, item.page, item.type, item.finished, false, false)">
                <van-card  v-for="(itemInner, indexInner) in getDataFiled(item.data)" :index="`${indexInner}投票`"  @click.stop="itemClick(itemInner)">
                  <div slot="title">
                    <p class="card-title van-multi-ellipsis--l2">
                      <van-tag color="#F5A703" size="large" text-color="#fff" v-if="itemInner.is_pick == 1">已参与</van-tag>
                      {{ itemInner.title }}
                      <!-- <van-tag color="#F54B03" size="large" text-color="#fff" v-else>已结束</van-tag>
                      {{ itemInner.title }} -->
                    </p>
                  </div>
                  <div slot="desc">
                    <p class="card-desc">
                      <span>发起人: {{ itemInner.user_name }}</span>
                      <span>{{ itemInner.date }}</span>
                    </p>
                  </div>
                </van-card>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        activeTab: 0,
        tabs: [
          {
            name: '进行中',
            type: '3',
            data: 'running',
            page: 'runningPage',
            finished: 'runningFinished'
          },
          {
            name: '已结束',
            type: '1',
            data: 'isEnd',
            page: 'isEndPage',
            finished: 'isEndFinished'
          },
        ],
        running: [],
        runningPage: 1,
        runningFinished: false,
        isEnd: [],
        isEndPage: 1,
        isEndFinished: false,

        refreshLoading: false,
        isLoading: false,
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '投票'})
      if(this.$refs.running) {
        this.$refs.running[0].scrollTo(0, this.$store.state.running || 0)
      }
      if(this.$refs.isEnd) {
        this.$refs.isEnd[0].scrollTo(0, this.$store.state.isEnd || 0)
      }
      if(this.$store.state.voted) {
        this.getDataList('running', 'runningPage', '3', 'runningFinished', true, true)
        this.getDataList('isEnd', 'isEndPage', '1', 'isEndFinished', true, true)
      }
    },
    mounted() {
      // this.getDataList('running', 'runningPage', '3', 'runningFinished', true)
      // this.getDataList('isEnd', 'isEndPage', '1', 'isEndFinished', true)
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      /**
       * 点击tab 记录卷去的高度 
       * @return {[type]} [description]
       */
      setSrollTop() {
        this.$nextTick(_ => {
          switch(this.activeTab) {
            case 0:
              this.$store.commit('changeStatus', {key: 'running', value: this.$refs.running[0].scrollTop})
              break;
            case 1:
              this.$store.commit('changeStatus', {key: 'isEnd', value: this.$refs.isEnd[0].scrollTop})
              break;
            case 2:
              this.$store.commit('changeStatus', {key: 'isStart', value: this.$refs.isStart[0].scrollTop})
              break;
            default:
              break;
          }
        })
        
      },
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      /**
       * 获取我的会议 - 列表
       * @return {[type]} [description]
       */
      getDataList(target, page, type, finished, init, showToast) {
        let self = this
        
        if(init) { //初始化查询
          self[page] = 1
          self[finished] = false
        }

        let config = {
          url: `${this.$common.basePath}message/vote.php`,
          data: {
            do: 'list',
            page: self[page]++,
            type: target == 'running' ? 0 : 1,
            user_id: self.$store.state.userId
          },
          method: 'POST'
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!self[finished] || init) {
          self.$axios(config).then(res => {
            self.isLoading = false
            self[target] = init ? res.data.list : self[target].concat(res.data.list)
            if(self[target].length >= res.data.total) {
              self[finished] = true
            }
            self.refreshLoading = false
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
            self[target] = []
            self.isLoading = false
            self[finished] = true
            self.refreshLoading = false
          })
        }
      },
      /**
       * 点击会议 根据类型进行操作
       * @param  {[type]} item [description]
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      itemClick(item) {
        this.setSrollTop()
        this.$router.push({name: 'voteDetail', query: {id: item.id, from:"default"}})
      }
    }
  }
</script>

<style lang="less">
  .padding-button {
    height: 30px!important;
    padding: 5px 22px 5px 22px!important;
    font-size: 17px!important;
    line-height: 17px!important;
  }
  #vote-list {
    .tab-panel  {
      -webkit-overflow-scrolling: touch;
      overflow-y: hidden; 
      .van-pull-refresh__track {
        min-height: calc(100vh - 44px);
      }
      .van-card {
        padding: 12px 16px;
        background: #fff;
        border-width: 75%;
        border-bottom: 1px solid #f5f5f5;
        &:not(:first-child) {
          /*margin-top: 12px!important;*/
        }
        &:last-child {
          border-bottom: none;
        }
        .van-card__thumb {
          width: 100px;
          height: 80px;
          & .van-image img {
            border-radius: 8px;
          }
        }
        .van-card__content {
          min-height: auto;
        }
      }
      .card-title {
        font-size: 17px;
        margin: 0;
      }
      .card-desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0 0 0;
        font-size: 14px;
        color: #666;
      }
      .card-footer {
        margin-top: 12px;
      }
    }
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30% 0 30% 0;
    background-color: #fff;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>